﻿/*---------------------------------------------------------

THIS FILE CONTAINS GENERIC OVERRIDES TO BOOTSTRAP

--------------------------------------------------------------*/
//ADMIN PREVIEW


.ewAdmin #adminHeader #headers.preview{
    @media(max-width:@screen-xs-max){
        margin-left:0px!important;
        a{
            margin:5px;
            float:right;
        }
    }
}

// --------------------------------------------------
// FLEXBOX MIXINS
// The spec: http://www.w3.org/TR/css3-flexbox
// --------------------------------------------------

// Flexbox display
// flex or inline-flex
.flex-display(@display: flex) {
	display: ~"-webkit-@{display}";
	display: ~"-moz-@{display}";
	display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
	display: ~"-ms-@{display}"; // IE11
	display: @display;
}

// The 'flex' shorthand
// - applies to: flex items
// <positive-number>, initial, auto, or none
.flex(@columns: initial) {
  -webkit-flex: @columns;
     -moz-flex: @columns;
      -ms-flex: @columns;
          flex: @columns;
}

// Flex Flow Direction
// - applies to: flex containers
// row | row-reverse | column | column-reverse
.flex-direction(@direction: row) {
  -webkit-flex-direction: @direction;
     -moz-flex-direction: @direction;
      -ms-flex-direction: @direction;
          flex-direction: @direction;
}

// Flex Line Wrapping
// - applies to: flex containers
// nowrap | wrap | wrap-reverse
.flex-wrap(@wrap: nowrap) {
  -webkit-flex-wrap: @wrap;
     -moz-flex-wrap: @wrap;
      -ms-flex-wrap: @wrap;
          flex-wrap: @wrap;
}

// Flex Direction and Wrap
// - applies to: flex containers
// <flex-direction> || <flex-wrap>
.flex-flow(@flow) {
  -webkit-flex-flow: @flow;
     -moz-flex-flow: @flow;
      -ms-flex-flow: @flow;
          flex-flow: @flow;
}

// Display Order
// - applies to: flex items
// <integer>
.flex-order(@order: 0) {
  -webkit-order: @order;
     -moz-order: @order;
      -ms-order: @order;
          order: @order;
}

// Flex grow factor
// - applies to: flex items
// <number>
.flex-grow(@grow: 0) {
  -webkit-flex-grow: @grow;
     -moz-flex-grow: @grow;
      -ms-flex-grow: @grow;
          flex-grow: @grow;
}

// Flex shrink
// - applies to: flex item shrink factor
// <number> 
.flex-shrink(@shrink: 1) {
  -webkit-flex-shrink: @shrink;
     -moz-flex-shrink: @shrink;
      -ms-flex-shrink: @shrink;
          flex-shrink: @shrink;
}

// Flex basis
// - the initial main size of the flex item
// - applies to: flex itemsnitial main size of the flex item
// <width> 
.flex-basis(@width: auto) {
  -webkit-flex-basis: @width;
     -moz-flex-basis: @width;
      -ms-flex-basis: @width;
          flex-basis: @width;
}

// Axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | space-between | space-around 
.justify-content(@justify: flex-start) {
  -webkit-justify-content: @justify;
     -moz-justify-content: @justify;
      -ms-justify-content: @justify;
          justify-content: @justify;
}

// Packing Flex Lines
// - applies to: multi-line flex containers
// flex-start | flex-end | center | space-between | space-around | stretch 
.align-content(@align: stretch) {
  -webkit-align-content: @align;
     -moz-align-content: @align;
      -ms-align-content: @align;
          align-content: @align;
}

// Cross-axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | baseline | stretch 
.align-items(@align: stretch) {
  -webkit-align-items: @align;
     -moz-align-items: @align;
      -ms-align-items: @align;
          align-items: @align;
}

// Cross-axis Alignment
// - applies to: flex items
// auto | flex-start | flex-end | center | baseline | stretch 
.align-self(@align: auto) {
  -webkit-align-self: @align;
     -moz-align-self: @align;
      -ms-align-self: @align;
          align-self: @align;
}

@zindex-modal-background: 0;
@social-links-margin:10px;
@social-links-margin-bottom:10px;

//a:hover,a:focus{text-decoration:none!important;}
@media (min-width: 992px){
	.fivecolumns{ 
		.col-md-2 {
			width: 20%!important;
			*width: 20%!important;
		}
		.col-md-4 {
			width: 40%!important;
			*width: 40%!important;
		}
		.col-md-6 {
			width: 60%!important;
			*width: 60%!important;
		}
		.col-md-8 {
			width: 80%!important;
			*width: 80%!important;
		}
	}
}
.make-container{
	.container-fixed;
	@media (min-width: @screen-sm-min){
		width: @container-sm;
	}
	@media (min-width: @screen-md-min) {
		width: @container-md;
	}
	@media (min-width: @screen-lg-min) {
		width: @container-lg;
	}
}
.navbar-unfixed-top{
	position:static!important;
	padding-top:0!important;
}
body .ewAdmin #adminHeader{
	background:#000;
}
.terminus{clear: both;line-height:0px;}
.Site{
	img.alignleft{
		margin-right:15px;
	}
	img.alignright{
		margin-left:15px;
	}
}
.cols2,
.cols3,
.cols4,
.cols5{
	.clearfix();
}
.Site .well-body .cols1,
.Site .alert-body .cols1,
.Site .nobox .cols1,
.Site .well-body .cols2,
.Site .alert-body .cols2,
.Site .nobox .cols2,
.Site .well-body .cols3,
.Site .alert-body .cols3,
.Site .nobox .cols3,
.Site .well-body .cols4,
.Site .alert-body .cols4,
.Site .nobox .cols4,
.Site .well-body .cols5,
.Site .alert-body .cols5,
.Site .nobox .cols5,
.Site .well-body .cols6,
.Site .alert-body .cols6,
.Site .nobox .cols6
{
	.row;
}

.Site .Sitemap .cols1{
	margin-right:0!important;
	margin-left:0!important;
}
.Site .Grid{
	padding-left:(@grid-gutter-width / 2);
	padding-right:(@grid-gutter-width / 2);
}
.Site .Grid .cols5{
	@media (max-width: @screen-xs-max){
		margin:0;
	}
}
@sm-2-col:false;
div:not(.content-scroller) when not (@sm-2-col = true){
	.cols2 .list-group-item,
	.cols2 .listItem{
		.make-md-column(6);
		@media (max-width: @screen-sm-max){
			height:auto!important;
			.lIinner{height:auto!important;}
		}
	}
	 > .cols3 .list-group-item,
	 > .cols3 .listItem{
		.make-md-column(4);
		@media (max-width: @screen-sm-max){
			height:auto!important;
			.lIinner{height:auto!important;}
		}
	}
	.cols4 .list-group-item,
	.cols4 .listItem{
		.make-md-column(3);
		@media (max-width: @screen-sm-max){
			height:auto!important;
			.lIinner{height:auto!important;}
		}
	}
	.cols5 .list-group-item,
	.cols5 .listItem{
		@media (min-width: @screen-sm-min){
			width: 20%;
			float:left;
		}
		@media (max-width: @screen-sm-min){
			width:100%;
			float:left;
		}
	}
	.cols5 .grid-item{
		@media (min-width: @screen-sm-min){
			width: 20%;
			float:left;		
			padding-left:(@grid-gutter-width / 2);
			padding-right:(@grid-gutter-width / 2);
		}
		@media (max-width: @screen-xs-max){
			height:auto!important;
			.thumbnail{height:auto!important;}
		}
	}
	.cols6 .list-group-item,
	.cols6 .listItem{
		.make-md-column(2);
		@media (max-width: @screen-sm-max){
			height:auto!important;
			.lIinner{height:auto!important;}
		}
		@media (max-width: @screen-sm-max){
			height:auto!important;
			.lIinner{height:auto!important;}
		}
	}
}
div:not(.content-scroller) when (@sm-2-col = true){
	.cols2 .list-group-item,
	.cols2 .listItem{
		.make-md-column(6);
		@media (max-width: @screen-xs-max){
			height:auto!important;
			.lIinner{height:auto!important;}
		}
	}
	 > .cols3 .list-group-item,
	 > .cols3 .listItem{
		.make-md-column(4);
		@media (max-width: @screen-xs-max){
			height:auto!important;
			.lIinner{height:auto!important;}
		}
	}
	.cols4 .list-group-item,
	.cols4 .listItem{
		.make-md-column(3);
		@media (max-width: @screen-xs-max){
			height:auto!important;
			.lIinner{height:auto!important;}
		}
	}
	.cols5 .list-group-item,
	.cols5 .listItem{
		@media (min-width: @screen-xs-min){
			width: 20%;
			float:left;
		}
		@media (max-width: @screen-xs-min){
			width:100%;
			float:left;
		}
	}
	.cols5 .grid-item{
		@media (min-width: @screen-xs-min){
			width: 20%;
			float:left;		
			padding-left:(@grid-gutter-width / 2);
			padding-right:(@grid-gutter-width / 2);
		}
		@media (max-width: @screen-xs-max){
			height:auto!important;
			.thumbnail{height:auto!important;}
		}
	}
	.cols6 .list-group-item,
	.cols6 .listItem{
		.make-md-column(2);
		@media (max-width: @screen-xs-max){
			height:auto!important;
			.lIinner{height:auto!important;}
		}
		@media (max-width: @screen-xs-max){
			height:auto!important;
			.lIinner{height:auto!important;}
		}
	}
}
.cols1 .grid-item{
	.make-sm-column(12);
	@media (max-width: @screen-xs-max){
		height:auto!important;
		.thumbnail{height:auto!important;}
	}
}
.cols2 .grid-item{
	.make-sm-column(6);
	@media (max-width: @screen-xs-max){
		height:auto!important;
		.thumbnail{height:auto!important;}
	}
}
.cols3 .grid-item{
	.make-sm-column(4);
	
	@media (max-width: @screen-xs-max){
		height:auto!important;
		.thumbnail{height:auto!important;}
	}
}
.cols4 .grid-item{
	.make-sm-column(3);
	
	@media (max-width: @screen-xs-max){
		height:auto!important;
		.thumbnail{height:auto!important;}
	}
}
.cols6 .grid-item{
	.make-sm-column(2);
	
	@media (max-width: @screen-xs-max){
		height:auto!important;
		.thumbnail{height:auto!important;}
	}
}

.Site .list-group .pager{
	//.make-sm-column(12);
}
.Site li.itemInfo .pager-caption{
	padding-top:6px;
	border:none;
}
.Site table{
	.table;
}
.Site thead tr td{
	vertical-align: bottom;
	border-bottom: 2px solid @table-border-color;
	font-weight:	700;
}
.Site .Grid{
	.row;
	.lIinner{.clearfix();}
}
.Site .Grid .grid-item a{
	display:block;
}
.ewXform{
    input,
    .form-control{border-radius:3px!important;}
    .has-alert input.form-control {
        border-color:@brand-danger;
        color:@brand-danger !important;
    }
    .alert-wrapper {
        color:@brand-danger;
        float: left;
        padding: 15px;
        border-radius:@border-radius-base!important;
        background-color:lighten(@brand-danger,40%);
        @media (min-width: @screen-xs-max){
        margin-left: 25%;
        } 
        .fa{
            font-size:2em;
            float:left;
            padding-right:10px;
        }
    }
}

// JQUERY LIGHTBOX
#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: @zindex-modal-background;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: @zindex-modal;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	zoom: 1;
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
}
.title .center-block i{
	text-align:center;
	margin-bottom:10px;
}
.title .center-block{
	text-align:center;
}

.Site{
    .align-left{text-align:left;}
    .align-right, .align-Right{text-align:right;}
    .align-centre, .align-center{text-align:center;}
    .socialLinks{
         a img{display:inline}
         a{margin-right:@social-links-margin}

         a:last-child{margin-right:0}
         margin-bottom:@social-links-margin-bottom;
    }
    .socialLinks.iconset-icons-circle{
        a{margin-right:0}
        a:last-child{margin-right:0}
    }
}



.Site a.social-sprite{
	width: 32px;
	height: 32px;
	display: block;
	background-position:0 0;
	float:left;
	margin-right:10px;
	&:hover{background-position:0 32px;}
}

.Site {
    #cartFull{
        .radiocheckbox input[type='radio']{
            margin-right:10px;
        }
    }
	#cartFull
	.ccForm{
		@media(min-width:@screen-sm-min){width:600px;}
		margin-left:auto;
		margin-right:auto;
	}
		 #PayForm {
            .control-wrapper{
                padding-left:0px;
                padding-right:0px;
            }
			.checkbox{
				margin-left:0px;
				padding-left:0px;
				padding-top:0px;
			}
			input.Cv2{
			background: #fff url(/ewcommon/images/icons/cv2hint.png) no-repeat right center;
			}
			.popoverContent{
				display:none;
			}
			.ccExpire, .ccIssue{
			
				.month{width:43%; display:inline-block; margin-right:2px;}
				.year{width:55%; display:inline-block;}
			} 
			.ccIssue, .issueNumber{
				display:none;
			}
            .creditCard .radiocheckbox{
                width:80px;
            }

			label.radio 
			{
				display:inline-block;
				padding-right:20px;
				height:45px;
				line-spacing:45px;
				/*height:25px;  WHY THE HEIGHT??? Clips all descending characters and brackets !! WH 2009-01-06*/
			}
            @media (max-width: @screen-sm-min){
            .checkbox{
                display:inline;
            }
            .radio input[type="radio"]
            {
                position:inherit;
                margin-left:0px;
            }
            
            }
            label{
                padding-left:0px;
            }
			label.MC, label.MasterCard,  label.Master-Card
			{
				background: transparent url(/ewcommon/images/icons/cc/mastercard.png) no-repeat 0px center;
				padding-left:63px;
				padding-top:10px;
				overflow: hidden;
				width: 0 !important;
				color: transparent; 
			}
			label.VISA, label.Visa
			{
				background: transparent url(/ewcommon/images/icons/cc/visa.png) no-repeat 0px  center;
				padding-left:60px;
				padding-top:10px;
				overflow: hidden;
				width: 0 !important;
				color: transparent; 
			}
			label.UKE, label.Uke
			{
				background: transparent url(/ewcommon/images/icons/cc/electron.gif) no-repeat 0px  center;
				padding-left:60px;
				padding-top:10px;
				overflow: hidden;
				width: 0 !important;
				color: transparent; 
			}
			label.DELTA, label.Delta
			{
				background: transparent url(/ewcommon/images/icons/cc/visadebit.png) no-repeat 0px  center;
				padding-left:60px;
				padding-top:10px;
				overflow: hidden;
				width: 0 !important;
				color: transparent; 
			}
			label.SOLO, label.Solo
			{
				background: transparent url(/ewcommon/images/icons/cc/solo.png) no-repeat 0px  center;
				padding-left:60px;
				padding-top:10px;
				overflow: hidden;
				width: 0 !important;
				color: transparent; 
			}
			label.SWITCH, label.MAESTRO, label.Switch, label.Switch-Maestro
			{
				background: transparent url(/ewcommon/images/icons/cc/maestro.png) no-repeat 0px  center;
				padding-left:60px;
				padding-top:10px;
				overflow: hidden;
				width: 0 !important;
				color: transparent; 
			}
			label.AMEX, label.American-Express
			{
				background: transparent url(/ewcommon/images/icons/cc/amex.png) no-repeat 0px  center;
				padding-left:60px;
				padding-top:10px;
				overflow: hidden;
				width: 0 !important;
				color: transparent; 
			}
            

		}
.responsive-cart{
    margin-bottom:10px;
    .clearfix;
        clear: both;
    .cart-headings,
    .cart-row{
        .clearfix;
        > div{@media(min-width:@screen-sm-min){float:left;}}
    }
    .totals-row,
    .cart-item{
        border-top:1px solid @gray-lighter;
        padding:5px 0;
    }
    .totals-row{
       text-align:right;
        > div{
            display:inline;
        }
        .amount{
            display:inline-block;
            width:110px;
            margin-left:30px;
        }
        .subTotal{
            border-top:1px solid @gray-lighter;
            margin-top:5px;
        }
    }
    .shipping{float:right;}
    .cart-headings{@media(max-width:@screen-xs-max){display:none}}
    //.cart-headings .quantity{padding-left: 53px;}
    .cart-headings,
    .cart-item{
        .btn-danger{float:none;}
        .quantity{float:left;}
        > div{
            padding:5px;
        }
        @media(min-width:@screen-sm-min){
            .flex-display;
            .align-items(center);
            > div{
                padding:5px;
                &.description{.flex-grow(4)}
            }
            button.update{
                float:none;
                margin-top:5px;
                display:block;
            }
        }
        @media(max-width:@screen-xs-max){
            .delete,
            .quantity .quantity-input button.update{
            //    margin-top:10px;
                margin:0 0 0 20px;
                float:left;
            }
            .quantity-input{float:left;}
            .quantity-input input{float:left;}
            .linePrice{
                float:right;
                text-align:right;
                width:auto!important;
            }
            .quantity{width:auto}
        }
    }
    .cart-thumbnail{
        width:60px;
        float:left;
        img{margin-bottom:0;}
    }
    .quantity{width:150px}
    .cart-item .quantity .quantity-input button.update{
        float:none;
    }

}
.rrpPrice
{
	text-decoration: line-through;
}

.ewXform {
    .form-text {
        padding-bottom: 0.7em;
    }

    /*.inline {
        > .form-group,
        > fieldset {
            .make-sm-column(6);
        }
        .form-group:nth-child(even) {
            margin-left: 0px !important;
            margin-right: 0px !important;
            padding-right: 0px !important;
            label {
                padding-right: 0px !important;
            }
        }
        .form-group:nth-child(odd) {
            margin-left: 0px !important;
            margin-right: 0px !important;
            padding-left: 0px !important;
            label {
                padding-left: 0px !important;
            }
        }
        .control-wrapper {
            padding-right: 0px !important;
            .input-group {  
               padding-right: 0px !important;
            }
        }
        .long {
            width: 100%;
        }
    }*/
	.inline {
        > .form-group,
        > fieldset {
            .make-sm-column(6);
        }
        .long {
            width: 100%;
        }
/*	margin-left:-(@grid-gutter-width/2);
	margin-right:-(@grid-gutter-width/2);
	div.form-group,
	.upload-wrapper{
		margin-left:0;
		margin-right:0;
		padding-left:0;
		padding-right:0;
	}*/
    }

}
}
iframe#threeDS {
        width: 100%;
        height: 500px;
    }
.slick-slider .lIinner{
	margin:0 (@grid-gutter-width / 2);
}
.fullwidthContainer .row{
	margin-left:0;
	margin-right:0;
	> div{
		padding-left:0;
		padding-right:0;
	}
}
.hidden-xs-nav{@media(max-width: @screen-xs-max){display:none!important;}}
.hidden-sm-nav{@media(min-width: @screen-sm-min) and (max-width: @screen-sm-max){display:none!important;}}
.hidden-md-nav{@media(min-width: @screen-md-min) and (max-width: @screen-md-max){display:none!important;}}
.hidden-lg-nav{@media(min-width: @screen-lg-min){display:none!important;}}

//MIXINS
.pill-clean(){
	background:none;
	border-radius:0;
	li:first-child{
		a{padding-left:0;}
	}
	li:last-child{
		a{padding-right:0;}
	}
	a{
		background:none;
		border-radius:0;
	}
	a:hover,
	a:focus,
	a.on,
	a.active,
	&:hover,
	&:focus,
	&.on,
	&.active{background:none;}
}
.left-right-pad(){
	padding-left:(@grid-gutter-width / 2);
	padding-right:(@grid-gutter-width / 2);
}
.tint-text(){
	color:lighten(@text-color, 20%);
	a{color:lighten(@text-color, 20%)}
	a:hover{color:lighten(@text-color, 30%)}
}
.remove-gradient(){
	background:none;
	filter:	progid:DXImageTransform.Microsoft.gradient(enabled = false) !important;
}
.clear-shadow(){
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	-webkit-text-shadow: none;
	-moz-text-shadow: none;
	text-shadow: none;
}
.detail .picture{
	float:right;
}
.detail .picture .text-muted{
text-align:right;
	padding-top:5px;
}

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}
input[readonly] {
  //background-color: white !important;
  cursor: text !important;
}
.multiline label {
    display:block;
    width:100% !important;
}
.multiline {
    clear:both;
}
//------------------------------------------------

//ACCORDION AND TABS
//------------------------------------------------

.Site{
	.ui-accordion h3 i.fa-chevron-down{padding-right:5px;}
	.accordion-module,
	.tabbed-module .nav-tabs{margin-bottom:15px;}
	.accordion-module{
		h3 span.caret{margin-right:5px;}
		a{
			i.fa-chevron-down,
			&.open i.fa-chevron-down{.rotate(0deg);}
			&.accordion-load i.fa-chevron-down,
			&.collapsed i.fa-chevron-down{.rotate(-90deg);position:relative;top:-.5em;left:-.5em}
		}
	}

}
